<template>
  <div>
    <Row>
      <Card style="width:100%" dis-hover="true">
        <b>商家筛选</b>
        <hr class="hr" />
        <br />
        <span style="margin-left: 20px;">商家名称 &nbsp;</span>
        <Input v-model="params.name" placeholder="请输入" style="width: 200px" />
        <span style="margin-left: 50px;">类型 &nbsp;</span>
        <Select v-model="params.kind" clearable style="width:200px">
          <Option value="美食">美食</Option>
          <Option value="饮品">饮品</Option>
          <Option value="超市">超市</Option>
          <Option value="生鲜">生鲜</Option>
        </Select>
        <span style="margin-left: 50px;">入驻时间 &nbsp;</span>
        <DatePicker
          v-model="params.time"
          type="date"
          placeholder="Select date"
          style="width: 200px"
        ></DatePicker>

        <Button
          type="primary"
          size="default"
          shape="circle"
          icon="ios-search"
          style="margin-left: 130px;"
          @click="search"
        ></Button>
      </Card>
    </Row>
    <br />
    <Row>
      <Card style="width:100%" dis-hover="true">
        <Table border ref="selection" :columns="columns" :data="shopList"></Table>
        <br />
        <Row>
          <span>共{{total}}条记录</span> &nbsp;&nbsp;
          <Button type="success" @click="addButton">添加商家</Button>
          <Button type="error" style="margin-left: 50px" @click="remove">删除选中</Button>
          <Button type="primary" style="margin-left: 50px" @click="exportExcel">导出商家信息</Button>
          <Page
            :total="total"
            :page-size="params.size"
            @on-change="changePage"
            style="float: right"
          />
        </Row>
      </Card>
    </Row>
    <Modal
      v-model="detailFlag"
      footer-hide="true"
      :styles="{top: '20px'}"
      width="900px"
      title="详细信息"
    >
      <Form :model="shopDetail" :label-width="80">
        <Row>
          <Col span="8">
            <FormItem label="商店名">
              <Input readonly v-model="shopDetail.shopName" style="width:130px"></Input>
            </FormItem>
          </Col>
          <Col span="8">
            <FormItem label="营业时间">
              <TimePicker
                :value="shopDetail.beginTime"
                format="HH点mm分"
                readonly
                style="width: 130px"
              ></TimePicker>
            </FormItem>
          </Col>
          <Col span="8">
            <FormItem label="打烊时间">
              <TimePicker :value="shopDetail.endTime" format="HH点mm分" readonly style="width: 130px"></TimePicker>
            </FormItem>
          </Col>
        </Row>
        <Row>
          <Col span="8">
            <FormItem label="餐盒费">
              <Input readonly v-model="shopDetail.boxCost" style="width:130px"></Input>
            </FormItem>
          </Col>
          <Col span="8">
            <FormItem label="配送费">
              <Input readonly v-model="shopDetail.sendCost" style="width:130px"></Input>
            </FormItem>
          </Col>
          <Col span="8">
            <FormItem label="评分">
              <Input readonly v-model="shopDetail.score" style="width:130px"></Input>
            </FormItem>
          </Col>
        </Row>
        <Row>
          <FormItem label="详细地址">
            <Input readonly v-model="shopDetail.address" style="width:400px"></Input>
          </FormItem>
        </Row>
        <FormItem label="Logo图片">
          <img :src="'data:image/png;base64,'+shopDetail.logoImg" width="200px" height="100px" />
        </FormItem>
        <FormItem label="店内图片">
          <img :src="'data:image/png;base64,'+shopDetail.storeImg" width="300px" height="150px" />
        </FormItem>
      </Form>
    </Modal>
    <Modal v-model="addFlag" width="400px" title="商家" @on-ok="ok">
      <Form :model="shopForm" :label-width="80">
        <FormItem v-if="editFlag" label="用户名(邮箱)">
          <Input readonly v-model="shopForm.email" style="width:200px"></Input>
        </FormItem>
        <FormItem v-else label="用户名(邮箱)">
          <Input v-model="shopForm.email" style="width:200px"></Input>
        </FormItem>
        <FormItem label="商店名">
          <Input v-model="shopForm.name" style="width:200px"></Input>
        </FormItem>
        <FormItem label="类型">
          <Select v-model="shopForm.shopKind" clearable style="width:200px">
            <Option value="美食">美食</Option>
            <Option value="饮品">饮品</Option>
            <Option value="超市">超市</Option>
            <Option value="生鲜">生鲜</Option>
          </Select>
        </FormItem>
        <FormItem label="联系电话">
          <Input v-model="shopForm.phone" style="width:200px"></Input>
        </FormItem>
        <FormItem label="地址">
          <Input v-model="shopForm.address" style="width:200px"></Input>
        </FormItem>
      </Form>
    </Modal>
  </div>
</template>
<script>
import * as shopApi from "@/api/shop.js";
import excel from "@/libs/excel";
export default {
  data() {
    return {
      addFlag: false,
      shopList: [],
      detailFlag: false,
      total: 0,
      params: {
        name: "",
        kind: "",
        time: null,
        page: 1,
        size: 10
      },
      shopDetail: {
        shopName: "",
        sendCost: 0,
        boxCost: 0,
        address: "",
        score: 0,
        beginTime: "",
        endTime: ""
      },
      shopForm: {
        name: "",
        shopKind: "",
        phone: "",
        email: "",
        address: ""
      },
      columns: [
        {
          type: "selection",
          width: 60,
          align: "center"
        },
        {
          title: "ID",
          key: "shopId"
        },
        {
          title: "登录邮箱",
          key: "email"
        },
        {
          title: "店名",
          key: "name"
        },
        {
          title: "类型",
          key: "shopKind"
        },
        {
          title: "联系电话",
          key: "phone"
        },
        {
          title: "入驻时间",
          key: "createTime"
        },
        {
          title: "状态",
          width: 120,
          key: "status",
          render: (h, params) => {
            if (params.row.status == "1") {
              return h("div", [
                h(
                  "div",
                  {
                    style:
                      "display: inline-block;width: 6px;height: 6px; border-radius: 50%; background-color:#67C23A;"
                  },
                  ""
                ),
                h("span", "可用")
              ]);
            } else {
              return h("div", [
                h(
                  "div",
                  {
                    style:
                      "display: inline-block;width: 6px;height: 6px; border-radius: 50%; background-color:red;"
                  },
                  ""
                ),
                h("span", "已删除")
              ]);
            }
          }
        },
        {
          title: "操作",
          key: "action",
          align: "center",
          render: (h, params) => {
            return h("div", [
              h(
                "Button",
                {
                  props: {
                    type: "primary",
                    size: "small"
                  },
                  style: {
                    marginRight: "5px"
                  },
                  on: {
                    click: () => {
                      this.shopForm.name = params.row.name;
                      this.shopForm.shopKind = params.row.shopKind;
                      this.shopForm.phone = params.row.phone;
                      this.shopForm.email = params.row.email;
                      this.shopForm.shopId = params.row.shopId;
                      this.shopForm.address = params.row.address;
                      this.addFlag = true;
                      this.editFlag = true;
                    }
                  }
                },
                "修改"
              ),
              h(
                "Button",
                {
                  props: {
                    type: "error",
                    size: "small"
                  },
                  on: {
                    click: () => {
                      this.showDetail(params.row.shopId);
                    }
                  }
                },
                "详细信息"
              )
            ]);
          }
        }
      ]
    };
  },
  methods: {
    initList: function() {
      shopApi.getShopList(this.params).then(res => {
        if (res.data.code == 200) {
          this.shopList = res.data.data.list;
          this.total = res.data.data.total;
        }
      });
    },
    search: function() {
      this.params.page = 1;
      this.initList();
    },
    changePage: function(page) {
      this.params.page = page;
      this.initList();
    },
    showDetail: function(shopId) {
      shopApi.detail(shopId).then(res => {
        if (res.data.code == 200) {
          this.shopDetail = res.data.data;
          this.detailFlag = true;
        } else {
          this.$Message.error("服务器发生未知错误");
        }
      });
    },
    remove: function() {
      this.$Modal.confirm({
        title: "警告",
        content: "<p>您确定要删除这条记录吗?</p>",
        onOk: () => {
          const shopList = this.$refs.selection.getSelection();
          shopApi.removeAll(shopList).then(res => {
            if (res.data.code == 200) {
              this.$Message.success("删除成功");
              this.initList();
            } else {
              this.$Message.error(res.data.message);
            }
          });
        },
        onCancel: () => {}
      });
    },
    addButton: function() {
      this.shopForm.name = "";
      this.shopForm.shopKind = "";
      this.shopForm.phone = "";
      this.shopForm.email = "";
      this.addFlag = true;
      this.editFlag = false;
    },
    ok: function() {
      if (this.editFlag) {
        shopApi.edit(this.shopForm).then(res => {
          if (res.data.code == 200) {
            this.$Message.success("修改成功");
            this.initList();
          } else {
            this.$Message.error("修改失败");
          }
        });
      } else {
        shopApi.add(this.shopForm).then(res => {
          if (res.data.code == 200) {
            this.$Message.success("新增用户成功");
            this.initList();
          } else {
            this.$Message.error(res.data.message);
          }
        });
      }
    },
    exportExcel() {
      if (this.shopList.length) {
        this.exportLoading = true;
        shopApi.exportExcel(this.shopList).then(res => {
          if (res.data.code == 200) {
            const params = {
              title: [
                "名称",
                "类型",
                "邮箱（用户名）",
                "联系人",
                "联系电话",
                "地址",
                "评分",
                "状态",
                "配送费",
                "餐盒费",
                "营业时间",
                "打烊时间",
                "入驻时间"
              ],
              key: [
                "shopName",
                "shopKind",
                "email",
                "contactMan",
                "phone",
                "address",
                "score",
                "status",
                "sendCost",
                "boxCost",
                "beginTime",
                "endTime",
                "creatTime"
              ],
              data: res.data.data,
              autoWidth: true,
              filename: "商家信息"
            };
            excel.export_array_to_excel(params);
            this.exportLoading = false;
          } else {
            this.$Message.error("导出数据失败！");
          }
        });
      } else {
        this.$Message.info("表格数据不能为空！");
      }
    }
  },
  mounted() {
    this.initList();
  }
};
</script>
<style>
.hr {
  margin-top: 7px;
  *margin: 0;
  border: 0;
  color: black;
  background-color: black;
  height: 1px;
}
</style>
